<template>
    <div class="keySet">
        <div class="keySet-title">
            <h5>关键岗位设置</h5>
        </div>
            <div class="keySet-centent" v-show="isShow">
                <div class="row">
              <!-- fa fa-refresh -->
                    <div class="tt">
                        <el-table :data="tableData" style="width: 100%">
                              <el-table-column type="index" label="序号" width="100"></el-table-column>
                              <el-table-column property="setid" label="公司集合ID" width="200"></el-table-column>
                              <el-table-column property="descrshort" label="公司名称" width="480"></el-table-column>
                              
                              
                              <el-table-column property="" label="操作" width="240">
                                  <template slot-scope="scope">
                                    <span class="opt-btn-sp"><a @click.stop="salaryDetail1(scope.row)"><i></i>职级</a></span>                                      
                                  </template>
                              </el-table-column>
                        </el-table>
                          
                              <el-dialog :title="dialogName" :visible.sync="dialogTableVisible">
                                 <template v-if="gridData.length != 0">     
                                    <el-checkbox-group v-model="checkList" class='checkbox-group'>
                                        <div v-for="(o,i) in gridData">
                                            <el-checkbox :key='i' :label="o.sta_lvl_descr"></el-checkbox>
                                        </div>
                                    </el-checkbox-group>                
                                     <span slot="footer" class="dialog-footer">
                                            <el-button type="primary" @click="save">保存</el-button>
                                            <el-button @click="dialogTableVisible=false">取消</el-button>
                                     </span>
                                  </template>
                                  <p class="nodata" v-else>暂无数据</p>
                              </el-dialog>
                           
                    </div>       
                </div>
            </div>
    </div>
</template>

<script>
//import 'Mock/mock_data'
import Vue from "vue";
import { CheckboxGroup, Checkbox } from "element-ui";
Vue.use(CheckboxGroup);
Vue.use(Checkbox);

import cardLeader from "@/components/card-leader";
import searchBox from "@/components/search-box";
export default {
  data() {
    return {
      dialogName:'',
      dialogTableVisible: false,
      isShow: true,
      tableData: [], //渲染页面
      checkList: [],
      // currentRow: null
      gridData: [],
      title: "",
      id: null
    };
  },
  mounted: function() {
    console.log("mounted!!!");
    // let self = this;
    // this.Axios.post('http://10.5.0.137:8080/user/queryUser',{}).then(function(res){
    //     console.log(res);
    //     self.tableData = res.data.datas;
    // })
    //绑定子页面需要的刷新模块方法
    this.salaryDetail();
  },
  methods: {
    salaryDetail: function() {
      let self = this;
      // let para = {
      //     emplId:this.personInfo.emplid
      // };
      this.Axios
        .Post(this.URL.getShowKeyPostionsList.url, "")
        .then(function(res) {
          self.tableData = res.data.datas.twoCompanyList;
        });
      //  this.dialogTableVisible = true;
    },
    salaryDetail1(row) {
      this.dialogName = row.descrshort + ' - 关键岗位设置'
      console.log(123,this.dialogName);
      this.id = row.setid;
      this.descrshort = row.descrshort;
      let param = {
        setId: this.id
      };
      this.Axios
        .Post(this.URL.getShowKeyPostionsListBySetId.url, param)
        .then(res => {
          this.gridData = res.data.datas.showList;
          let checkedPostion = res.data.datas.checkedPostion;
          //   console.log("this.gridData", this.gridData);

          let payArray = [];
          for (let i = 0; i < checkedPostion.length; i++) {
            payArray.push(checkedPostion[i].rank);
          }
          this.checkList = payArray;
        });
      this.dialogTableVisible = true;
    },
    save() {
      let params = {
        setId: this.id,
        descrshort: this.descrshort,
        position: this.checkList
      };
      //   console.log(this.checkList, "checkList");
      this.Axios.Post(this.URL.savekeyPostions.url, params).then(res => {
        // console.log(res.data, "res.data");
      });
      this.dialogTableVisible = false;
    }
  },
  props: {
    personInfo:{
        type:String,
        default:''
    },
  },

  beforeDestroy: function() {
    window.getFlowProcessFrom = null;
    window.getFlowProcessApplyFrom = null;
    window.getFlowProcessApprovedFrom = null;
  },
  components: {
    cardLeader,
    searchBox
  }
};
</script>

<style scoped>
.checkbox-group div {
  margin-bottom: 10px;
}
.nodata{
  display:block;
  text-align: center;
  
}
/* .keySet .first-title h3{
        font-size: 24px;
        margin-top: 20px;
        margin-bottom: 20px;
        font-weight: 500;
        line-height: 1.1;
    } */
/* .keySet .second-sec{
        position: relative;
        border-radius: 3px;
        background: #ffffff;
        border-top: 3px solid #d2d6de;
        margin-bottom: 20px;
        width: 100%;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        border-top-color: #00a65a;
    } */
/* .content-right{
      float:right;
      margin-top:17px;
    } */

/* .keySet .select-dept{
      font-size: 14px;
    } */
/* .keySet .display-title{
      border-bottom: 1px solid #f4f4f4;
      padding:10px;
    } */
/* .keySet .switch-btn{
      padding: 10px 10px;
    } */
/* .keySet .collapse-card{
      padding: 10px 10px;
      border-bottom: 1px solid #f4f4f4;
    } */

/* .keySet .third-card{
        position: relative;
        border-radius: 3px;
        background: #ffffff;
        border-top: 3px solid #3c8dbc;
        margin-bottom: 20px;
        width: 100%;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    } */
/* .keySet .third-card .collapse-card .box-title{
        display: inline-block;
        font-size: 18px;
        color: #444;
        font-weight: 500;
        margin: 0;
        line-height: 1;
    } */
/* .keySet .third-card .collapse-card .box-title .box-header > .box-tools {
        position: absolute;
        right: 10px;
        top: 5px;
    } */
/* .keySet .third-card .collapse-card  .collapse {
        border-radius: 3px;
        -webkit-box-shadow: none;
        box-shadow: none;
        border: 1px solid transparent;
        padding: 5px;
        font-size: 12px;
        background: transparent;
        color: #97a0b3;
    } */
/*content*/
/* .keySet {
    clear: both;
    margin-bottom: 25px;
    margin-top: 0;
    padding: 0;
} */
.keySet-title {
  background-color: #ffffff;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 2px 0 0;
  color: inherit;
  margin-bottom: 0;
  color: #6c6a6c;
  padding: 15px 15px 7px;
  min-height: 48px;
}
/* .keySet-title h5 {
    display: inline-block;
    font-size: 14px;
    margin: 0 0 7px;
    padding: 0;
    text-overflow: ellipsis;
    float: left;
} */

/* .keySet-tools {
    display: block;
    float: none;
    margin-top: 0;
    position: relative;
    padding: 0;
    text-align: right;
} */
/* .keySet-tools a {
    cursor: pointer;
    margin-left: 5px;
    color: #c4c4c4;
} */
/*keySet-centent*/
.keySet-centent {
  padding: 0px 10px 40px;
  clear: both;
  background-color: #ffffff;
  color: inherit;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 1px 0;
}
.keySet .row {
  margin-right: -10px;
  margin-left: -10px;
}
/* .row .search{
  width:100%;
  margin-bottom: 15px;
  padding-left:12px;
  padding-right:12px;

} */
/* .row .search .wi{
  width:33.3333333%;
} */
/* .el-button{
  background:#1AB394;
  border:1px solid #1AB394;
  color:#fff;
} */
.search-l {
  width: 33.3333333%;
  margin-bottom: 5px;
}
/* .el-button .r{
  width:66.66666667%;
} */
/* .el-input-group__append .el-button{
  background:#1AB394;
  color:#fff;
} */
/*table*/
/* .el-table__header-wrapper thead div {
    background-color: #fff;
    color: #1f2d3d;
} */
/* .btn-sp{
    padding-left: -10px;
} */
/* .btn-sp>a{
    border:1px solid #23c6c8;
    background: #23c6c8;
    color:#fff;
    border-radius: 3px;
    padding:2px 9px;
    font-size:12px;
    display:inline-block;
    margin-top:5px;
    
} */
.opt-btn-sp > a {
  border: 1px solid #18a689;
  background: #18a689;
  color: #fff;
  border-radius: 3px;
  padding: 2px 9px;
  font-size: 12px;
  display: inline-block;
  /* margin-top:5px; */
}
/* .delete>a{
     border:1px solid #ec4758;
    background: #ec4758;
    color:#fff;
    border-radius: 3px;
    padding:2px 9px;
    font-size:12px;
    display:inline-block;
    margin-top:5px;
} */
.el-pagination {
  margin-top: 20px;
}
</style>
<style>
/*修改element-ui样式*/

.keySet .el-radio-button__inner:hover {
  color: #333;
}
.keySet .el-radio-group .el-radio-button__inner:hover {
  background-color: #e7e7e7;
}
.keySet .el-radio-group .el-radio-button__inner {
  background-color: #f4f4f4;
}

.keySet .el-radio-group .is-active .el-radio-button__inner:hover {
  background-color: #d4d4d4 !important;
}
/*i*/
.keySet .el-menu--collapse > .el-submenu > .el-submenu__title [class^="el-icon-"] {
  margin: 0;
  vertical-align: middle;
  width: 14px;
  text-align: center;
}
.keySet .el-input-group--append .el-input__inner,
.keySet .el-input-group__prepend {
  border-width: 1px 0px 1px 1px;
}
/* .el-input-group__append .el-button[data-v-4fefba28]{
      border:1px solid #1AB394;
      border-radius:0px 3px 3px 0px;
      line-height:0.99;
} */
/*table*/
.keySet .el-table {
  border: none !important;
}
.keySet .el-table th {
  background: #fff !important;
  height: 52px !important;
  vertical-align: left !important;
}
.keySet .el-table__footer-wrapper thead div,
.keySet .el-table__header-wrapper thead div {
  background: #fff !important;
}
.keySet .el-table .cell {
  padding: 10px;
  cursor: pointer;
  text-align: center;
}
.keySet .el-table__body-wrapper {
  overflow: hidden !important;
}
/* .el-table .cell, .el-table th>div{
    padding-left: 5px ! important;
    padding-right: 5px ! important;
} */
/* .keySet-tools dh{
    background:red;
   display:inline-block;
} */
.keySet .el-table::after {
  height: 0 !important;
}
</style>
